<template>
  <div class="axiom-tree-table">
    <AxiomLoading v-if="loading" text="加载中..." />
    <el-table
      v-else
      ref="tableRef"
      :data="data"
      row-key="id"
      :default-expand-all="defaultExpandAll"
      :tree-props="treeProps"
      border
      stripe
      @row-click="(row, column, event) => $emit('row-click', row, column, event)"
      v-bind="$attrs"
    >
      <!-- [新增] 空状态插槽 -->
      <template #empty>
        <slot name="empty">
          <AxiomEmpty />
        </slot>
      </template>

      <el-table-column
        v-for="col in columns"
        :key="col.prop"
        v-bind="col"
      >
        <!-- [新增] 为自定义列渲染提供插槽 -->
        <template #default="{ row }">
          <slot v-if="col.slot" :name="col.slot" :row="row"></slot>
          <span v-else>{{ col.formatter ? col.formatter(row, col, row[col.prop]) : row[col.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230" align="center" fixed="right">
        <template #default="{ row }">
          <slot name="actions" :row="row">
            <!-- Default action buttons -->
            <div class="action-buttons">
              <AxiomButton type="primary" link icon="plus" @click.stop="$emit('add', row)">新增子项</AxiomButton>
              <AxiomButton type="primary" link icon="edit" @click.stop="$emit('edit', row)">编辑</AxiomButton>
              <AxiomButton type="danger" link icon="delete" @click.stop="$emit('delete', row)">删除</AxiomButton>
            </div>
          </slot>
        </template>
      </el-table-column>
      <slot name="append" />
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import AxiomLoading from './AxiomLoading.vue';
import AxiomButton from './AxiomButton.vue';
import AxiomEmpty from './AxiomEmpty.vue';

defineOptions({
  name: 'AxiomTreeTable'
});

defineProps({
  data: { type: Array, required: true },
  columns: { type: Array, required: true },
  loading: { type: Boolean, default: false },
  defaultExpandAll: { type: Boolean, default: false },
  treeProps: { type: Object, default: () => ({ children: 'children', hasChildren: 'hasChildren' }) },
});

defineEmits(['row-click', 'add', 'edit', 'delete']);

const tableRef = ref(null);

defineExpose({
  tableRef
});
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-tree-table';
</style> 